<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const { defineConfig } = require('@vue/cli-service')
        module.exports = defineConfig({
            // 基本路径
            publicPath: '/',

            // 输出文件目录
            outputDir: 'dist',

            // 静态资源目录 (相对于 outputDir)
            assetsDir: 'static',

            // 是否在开发环境下启用 eslint-loader
            lintOnSave: process.env.NODE_ENV !== 'production',

            // webpack-dev-server 相关配置
            devServer: {
                open: true, // 自动打开浏览器
                host: '0.0.0.0', // 可以通过 IP 地址访问
                port: 8080, // 端口号
                https: false,
                hotOnly: false, // 开启热更新
                proxy: { // 设置代理解决跨域问题
                    // 它在开发服务器（Node.js 服务）内部做一个“转发”，
                    // 让前端请求先发给自己的开发服务器，再由这个服务器去请求真正的后端 API。
                    '/api': {
                        target: 'http://localhost:4000/',
                        changeOrigin: true,
                        pathRewrite: {
                            '^/api': ''
                        }
                    }
                },
            },

            // 生产环境下的 source map 设置
            productionSourceMap: false,

            // webpack 链式操作（chainWebpack）
            chainWebpack: config => {
                // 修改图片加载器选项
                config.module
                    .rule('images')
                    .use('url-loader')
                    .loader('url-loader')
                    .tap(options => {
                        // 修改它的选项...
                        return options;
                    })
            },

            // 手动修改 webpack 配置（configureWebpack）
            configureWebpack: {
                resolve: {
                    alias: {
                        '@': require('path').resolve(__dirname, 'src'),
                    },
                    extensions: ['.js', '.vue', '.json']
                },
                plugins: [
                    // 添加自定义插件
                ]
            },

            // CSS 相关配置
            css: {
                // 是否使用css分离插件 ExtractTextPlugin
                extract: process.env.NODE_ENV === 'production',
                // 开启 CSS source maps?
                sourceMap: false,
                // css预设器配置项
                loaderOptions: {
                    sass: {
                        additionalData: `@import "@/styles/_variables.scss";`
                    }
                }
            }
        })

        /*
        
        publicPath: 应用的基础路径，默认为 '/'。对于部署在子目录下的应用，你需要设置这个值。
        outputDir: 构建输出的目标目录，默认是 dist。
        assetsDir: 放置生成的静态资源 (js, css, img, fonts) 的目录。
        devServer: 开发服务器配置，支持自动打开浏览器、设置端口、代理等功能。
        chainWebpack 和 configureWebpack: 提供了两种方式来修改 Webpack 配置。chainWebpack 使用 webpack-chain API 对配置进行链式修改，而 configureWebpack 则允许直接修改 Webpack 配置对象。
        css.loaderOptions: 允许向 CSS 相关的 loader 传递额外选项。
        */ 
    </script>
</body>

</html>